<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>grid</title>
    <link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
    <style>
    .grid{
    	background-color: white;
    }
    </style>
</head>

<body ontouchstart="">
	<header>
	    <div class="titlebar">
	        <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
	        <h1 class="titlebar-title">Grid栅格化</h1>
	    </div>
	</header>
	<article>
		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">应用图标</p>
		</div>
		<ul class="grid" data-col="3" data-rowspace="8">
			<li>
				<a class="size50 bg-1">
					<i class="icon icon-contact-fill size30"></i>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label>通讯录</label>
			</li>
			<li>
				<a class="size50 bg-2">
					<i class="icon icon-write-fill size30"></i>
					<span class="badge" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label>审批</label>
			</li>
			<li>
				<a class="size50 bg-3">
					<i class="icon icon-position-fill size30"></i>
				</a>
				<label>定位</label>
			</li>
			<li>
				<a class="size50 bg-4">
					<i class="icon icon-gear-fill size30"></i>
				</a>
				<label>设置</label>
			</li>
			<li>
				<a class="size50 bg-5">
					<i class="icon icon-folder-fill size30"></i>
				</a>
				<label>文档</label>
			</li>
			<li>
				<a class="size50 bg-6">
					<i class="icon icon-chartpie-fill size30"></i>
				</a>
				<label>数据分析</label>
			</li>
		</ul>
		</div>

		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">应用图标-bordered</p>
		</div>
		<ul class="grid grid-bordered" data-col="3" data-rowspace="8">
			<li>
				<a class="size54 bordered radiusround color-body">
					<i class="icon icon-contact-fill size30"></i>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label>通讯录</label>
			</li>
			<li>
				<a class="size54 bordered radiusround color-body">
					<i class="icon icon-write-fill size30"></i>
				</a>
				<label>审批</label>
			</li>
			<li>
				<a class="size54 bordered radiusround color-body">
					<i class="icon icon-position-fill size30"></i>
				</a>
				<label>定位</label>
			</li>
			<li>
				<a class="size54 bordered radiusround color-body">
					<i class="icon icon-gear-fill size30"></i>
				</a>
				<label>设置</label>
			</li>
			<li>
				<a class="size54 bordered radiusround color-body">
					<i class="icon icon-folder-fill size30"></i>
				</a>
				<label>文档</label>
			</li>
			<li>
				<a class="size54 bordered radiusround color-body">
					<i class="icon icon-chartpie-fill size30"></i>
				</a>
				<label>数据分析</label>
			</li>
		</ul>
		</div>

		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">裸图标</p>
		</div>
		<ul class="grid" data-col="3" data-rowspace="8">
			<li>
				<a class="color-1 size32">
					<i class="icon icon-contact-fill size32"></i>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label>通讯录</label>
			</li>
			<li>
				<a class="color-2 size32">
					<i class="icon icon-write-fill size32"></i>
				</a>
				<label>审批</label>
			</li>
			<li>
				<a class="color-3 size32">
					<i class="icon icon-position-fill size32"></i>
				</a>
				<label>定位</label>
			</li>
			<li>
				<a class="color-4 size32">
					<i class="icon icon-gear-fill size32"></i>
				</a>
				<label>设置</label>
			</li>
			<li>
				<a class="color-5 size32">
					<i class="icon icon-folder-fill size32"></i>
				</a>
				<label>文档</label>
			</li>
			<li>
				<a class="color-6 size32">
					<i class="icon icon-chartpie-fill size32"></i>
				</a>
				<label>数据分析</label>
			</li>
		</ul>
		</div>

		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">裸图标-bordered</p>
		</div>
		<ul class="grid grid-bordered" data-col="3" data-rowspace="8">
			<li>
				<a class="color-1 size32">
					<i class="icon icon-contact-fill size32"></i>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label>通讯录</label>
			</li>
			<li>
				<a class="color-2 size32">
					<i class="icon icon-write-fill size32"></i>
				</a>
				<label>审批</label>
			</li>
			<li>
				<a class="color-3 size32">
					<i class="icon icon-position-fill size32"></i>
				</a>
				<label>定位</label>
			</li>
			<li>
				<a class="color-4 size32">
					<i class="icon icon-gear-fill size32"></i>
				</a>
				<label>设置</label>
			</li>
			<li>
				<a class="color-5 size32">
					<i class="icon icon-folder-fill size32"></i>
				</a>
				<label>文档</label>
			</li>
			<li>
				<a class="color-6 size32">
					<i class="icon icon-chartpie-fill size32"></i>
				</a>
				<label>数据分析</label>
			</li>
		</ul>
		</div>

		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">相册</p>
		</div>
		<ul class="grid" data-col="3">
			<li>
				<a style="height:110px;background-image: url(../images/1.jpg)"></a>
			</li>
			<li>
				<a style="height:110px;background-image: url(../images/2.jpg)"></a>
			</li>
			<li>
				<a class="default" style="height:110px;">
					<i class="icon icon-camera size54"></i>
				</a>
			</li>
		</ul>
		<ul class="grid" data-col="3">
			<li>
				<a class="radius8" style="height:110px;background-image: url(../images/4.jpg)">
					<span class="close absolute" style="top:-4px;right:-4px;"><i class="icon icon-close"></i></span>
				</a>
			</li>
			<li>
				<a class="radius8" style="height:110px;background-image: url(../images/5.jpg)">
					<span class="close absolute" style="top:-4px;right:-4px;"><i class="icon icon-close"></i></span>
				</a>
			</li>
			<li>
				<a class="radius8 default" style="height:110px;">
					<i class="icon icon-camera size54"></i>
				</a>
			</li>
		</ul>
		</div>
		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">缩略图</p>
		</div>
		<ul class="grid" data-rowspace="8" data-col="3">
			<li>
				<a>
					<img src="../images/contact.jpg"/>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">新</span>
				</a>
				<label>通讯录</label>
			</li>
			<li>
				<a><img src="../images/contact.jpg"/></a>
				<label>树结构</label>
			</li>
			<li>
				<a><img src="../images/contact.jpg"/></a>
				<label>通讯录</label>
			</li>
			<li>
				<a><img src="../images/contact.jpg"/></a>
				<label>通讯录</label>
			</li>
		</ul>
		</div>
	</article>
    <!-- <script src="../scripts/lib/seedsui/seedsui.min.js"></script> -->
	<script>
		//定义exmobi返回
		function back(){history.go(-1);}
	</script>
</body>
</html>
